<template>

    <div class="layui-col-md12"><!--container -->
        <div class="layui-card">
            <div class="layui-card-header"><i class="layui-icon">&#xe66f;</i> 用户信息录入</div>
                <div class="layui-card-body">
                    <div class="layui-form-item" pane="">
                        <div class="layui-input-block" style="    position: relative;top: 15px;">
                            <label>第一次开户：</label><input class="radio1" v-model="IsfirstAccount" type="radio" value="1" title="是" style="margin-right: 46%;">
                            <label>非第一次开户：</label><input class="radio1" v-model="IsfirstAccount" type="radio" value="0" title="否">
                        </div>
                    </div>
                </div>
                <fieldset id="isFirstDisabled">
                <div class="layui-card-body" id="isFirstPanel" style="width: 48%;position:absolute;">  
                        <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">身份证号</label>
                            <div class="layui-input-inline">
                            <input type="text" v-model="uid" maxlength="18" lay-verify="required" placeholder="请输入18位身份证号" autocomplete="off" class="layui-input  form-control" oninput = "value=value.replace(/[^\d]/g,'')">
                            </div>
                            <span v-bind:class="[isDisabled ? 'isDisabledClass':'noDisabledClass']">已输入{{uidCount}}位身份证</span>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">姓名</label>
                            <div class="layui-input-inline">
                            <input type="text" v-model="uname" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input  form-control">
                            </div>
                        </div>
                         <!--支付密码框-->
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">账号密码</label>
                            <div class="password-div">
                                <label for="password" class="password-lable">
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                    <input id="password" v-model="firstPassword" type="password" name="password" maxlength="6">
                                </label>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">性别</label>
                            <label class="sex">男：</label><input class="radio2" v-model="sex" type="radio" value="1" title="男" style="display:inline-block;">
                            <label class="sex">女：</label><input class="radio2" v-model="sex" type="radio" value="0" title="女" style="display:inline-block;">
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                            <label class="layui-form-label form-control">出生日期</label>
                            <div class="layui-input-block">
                                <input type="date" v-model="birthday" class="layui-input  form-control" lay-verify="required"/>
                            </div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label  form-control">家庭住址</label>
                            <div class="layui-input-inline selectAddress">
                                <!--省-->                                
                            <select id="province" v-model="provinceId" @change="getTwoAddressByParentId(provinceId,'1')" style="display:inline-block;" class="form-control select1">
                                <option v-for="province in provinces" v-bind:value="province.addressId">
                                    {{ province.cityName }}
                                </option>
                            </select>
                            </div>
                            <div class="layui-input-inline selectAddress">
                                <!--市-->
                            <select id="city" v-model="cityId" @change="getTwoAddressByParentId(cityId,'2')" style="display:inline-block;" class="form-control select1">
                                <option v-for="city in citys" v-bind:value="city.addressId">
                                    {{ city.cityName }}
                                </option>
                            </select>
                            </div>
                            <div class="layui-input-inline selectAddress">
                                <!--县-->
                            <select id="county" v-model="countyId" style="display:inline-block;" class="form-control select1">
                                <option v-for="county in countys" v-bind:value="county.addressId">
                                    {{ county.cityName }}
                                </option>
                            </select>
                            <!-- <el-form-item label="">
                                <el-input type="textarea" v-model="addressDesc"></el-input>
                            </el-form-item> -->
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">电话号码</label>
                            <div class="layui-input-inline">
                            <input type="text" v-model="telephone" maxlength="11" lay-verify="required" placeholder="请输入11位电话号码" autocomplete="off" class="layui-input  form-control" oninput = "value=value.replace(/[^\d]/g,'')">
                            </div>
                        </div>
                        <button class="btn btn-primary" style="width: 100%;" @click.prevent="firstOpenAccount">首次开户</button>
                    </form>
                </div>
                </fieldset>
                <fieldset id="noFirstDisabled" disabled="disabled">
                <div class="layui-card-body activePannel" id="noFirstPanel" style="width: 48%;float:right;margin-top: 0;">
                    <form class="layui-form layui-form-pane" action="">
                        <img src="/loginImg/bank.jpg" alt="" class="nofirstimg">
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">身份证号</label>
                            <div class="layui-input-inline">
                            <input type="text" v-model="uid1" maxlength="18" lay-verify="required" placeholder="请输入18位身份证号" autocomplete="off" class="layui-input  form-control" oninput = "value=value.replace(/[^\d]/g,'')">
                            </div>
                            <span v-bind:class="[isDisabled1 ? 'isDisabledClass':'noDisabledClass']">已输入{{uidCount1}}位身份证</span>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">姓名</label>
                            <div class="layui-input-inline">
                            <input type="text" v-model="uname1" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input  form-control">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">已有账户</label>
                            <div class="layui-input-inline">
                            <input id="existAccountId" type="text" v-model="existAccount" maxlength="18" lay-verify="required" placeholder="请输入已有卡号" autocomplete="off" class="layui-input  form-control" oninput = "value=value.replace(/[^\d]/g,'')">
                            </div>
                            <span v-bind:class="[isDisabledAccount ? 'isDisabledClass':'noDisabledClass']">已输入{{existAccountCount}}位卡号</span>
                            <span v-bind:class="[isAccountexist ? 'isAccountexistClass':'noAccountexistClass']">该用户不存在该账户</span>
                        </div>
                         <!--支付密码框-->
                        <div class="layui-form-item">
                            <label class="layui-form-label form-control">新卡密码</label>
                            <div class="password-div1">
                                <label for="password" class="password-lable">
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                    <input id="password1" v-model="nofirstPassword" type="password" name="password1" maxlength="6">
                                </label>
                            </div>
                        </div>
                        <button class="btn btn-primary" style="width: 100%;margin-top: -40px;" @click.prevent="nofirstOpenAccount">非首次开户</button>
                    </form>
                </div>
                </fieldset>
            </div>
        </div>
    </div>
</template>

<script>
import Qs from 'qs'
export default {
    inject:['reload'],
    name: "openAccount",
    data (){
        return {
            uid:'',//身份证 
            uidCount:'',//身份证计数
            uidCount1:'',//非第一次开户身份证计数
            existAccountCount:'',//已存在的卡号账户计数
            isDisabled:false,//判断是否出现身份证计数
            isDisabled1:false,//判断非第一次开户身份证计数
            isDisabledAccount:false,//判断已有账户的计数
            uname:'',//姓名
            IsfirstAccount:'1',//单选框
            sex:'1',//性别
            birthday:'',//出生日期
            age:'',//通过出生日期计算年龄
            telephone:'',//电话号码
            firstPassword:'',//第一次开户密码框绑定
            addressDesc:'',//详细信息

            uid1:'',//非第一次开户身份证
            uname1:'',//非第一次开户用户名
            existAccount:'',//已存在的账户卡号
            nofirstPassword:'',//非第一次开户密码框绑
            isAccountexist:'false',//账户是否存在
            provinceId:'0',//省级默认    
            provinces:[
                {addressId:0,cityName:'请选择省'}
            ],//地址省级
            cityId:'0',//市级默认
            citys:[
                {addressId:0,cityName:'请选择市'}
            ],
            countyId:'0',//市级默认
            countys:[
                {addressId:0,cityName:'请选择县/区'}
            ],
        }
    },
    watch: {
        // 如果 `IsfirstAccount`单选框 发生改变，这个函数就会运行
        IsfirstAccount: function (newRadio, oldRadio) {
            if('0'===newRadio){ //第一次开户
               $('#isFirstPanel').addClass('activePannel');
                $('#noFirstPanel').removeClass('activePannel');
                $('#isFirstDisabled').attr('disabled','disabled');
                $('#noFirstDisabled').removeAttr('disabled');
            }else if('0'===oldRadio){//非第一次开户
                $('#isFirstPanel').removeClass('activePannel');
                $('#noFirstPanel').addClass('activePannel');
                $('#isFirstDisabled').removeAttr('disabled');
                $('#noFirstDisabled').attr('disabled','disabled');
            }
        },
        uid: function(o,n){//监听身份证位数
            this.uidCount=this.uid.length;
            if(this.uidCount>0){
                this.isDisabled=true;
            }else{
                this.isDisabled=false;
            }
        },
        uid1: function(o,n){//非第一次开户身份证计数
            this.uidCount1=this.uid1.length;
            if(this.uidCount1>0){
                this.isDisabled1=true;
            }else{
                this.isDisabled1=false;
            }
        },
        existAccount: function (o,n){//已有卡号
            this.existAccountCount=this.existAccount.length;
            if(this.existAccountCount>0){
                this.isDisabledAccount=true;
            }else{
                this.isDisabledAccount=false;
            }
        }

    },
    mounted: function (){
        this.getAddress(1);//获取所有的省份城市
        this.passwordShow();//密码框的显示
    },
    methods: {
        passwordShow: function(){
            //第一次开户密码框的显示
            $(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
                var number = 6;   //定义输入最大值
                var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
                var list = $(".password-div ul li");  //定义list是li
                for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
                    if(pw[i]){
                        $(list[i]).text("·");
                    }else{
                        $(list[i]).text("");
                    };
                };
            });
            $(".password-div ul").click(function(){      
                $("input[name = 'password']").val("");
                $("#password").focus();
                $(".password-div ul li").text("");
            });
            //非第一次开户密码框的显示
             $(".password-div1 input").on("input",function(e){ //标签为password-div下的input添加oninput事件
                var number = 6;   //定义输入最大值
                var pw = $("input[name = 'password1']").val(); //定义pw为name是password的input框的输入值
                var list = $(".password-div1 ul li");  //定义list是li
                for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
                    if(pw[i]){
                        $(list[i]).text("·");
                    }else{
                        $(list[i]).text("");
                    };
                };
            });
            $(".password-div1 ul").click(function(){      
                $("input[name = 'password1']").val("");
                $("#password1").focus();
                $(".password-div1 ul li").text("");
            });
        },
        getAddress: function(level){//获取省
            this.$axios
            .get('/bk-user/getAddressByLevel/'+level,
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                //直接获取省的字段
                for(var i=0;i<result.data.data.length;i++){
                    this.provinces.push(
                        result.data.data[i]
                    );
                }
                
            })
            .catch(failResponse => {})
        },
        getTwoAddressByParentId: function(ParentId,level){//根据select来变换二级城市
            this.$axios
            .get('/bk-user/getAddressByParentId/'+ParentId,
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                //直接获取市的字段
                if("1"===level){
                    this.citys=[{addressId:0,cityName:'请选择市'}];//清空select框防止叠加城市
                    this.cityId=0;
                    this.countys=[{addressId:0,cityName:'请选择县'}];//清空select框防止叠加城市
                    this.countyId=0;
                    for(var i=0;i<result.data.data.length;i++){
                        this.citys.push(
                            result.data.data[i]
                        );
                    }
                }else if("2"===level){
                    this.countys=[{addressId:0,cityName:'请选择县'}];//清空select框防止叠加城市
                    this.countyId=0;
                    for(var i=0;i<result.data.data.length;i++){
                        this.countys.push(
                            result.data.data[i]
                        );
                    }
                }
                
                
            })
            .catch(failResponse => {})
        },
        firstOpenAccount: function (){//第一次开户
            var Uidregix=/^[\d]{18}$/;//身份证
            var password=/^[\d]{6}$/;
            var tel=/^[\d]{11}$/;//电话号码12位
            var uidflag=this.uid.match(Uidregix);
            var firstPassword=this.firstPassword.match(password);
            var telephone=this.telephone.match(tel);

            //获取计算年龄
            var date = new Date();
            var startDate = new Date(this.birthday);//获得出生日期
            var newDate = date.getTime() - startDate.getTime();
            this.age= Math.ceil(newDate / 1000 / 60 / 60 / 24 /365);
            //获取计算地址
            var address=$('#province option:selected').text().trim()+","+$('#city option:selected').text().trim()+","+$('#county option:selected').text().trim();
            var data = Qs.stringify({
                "uid":this.uid,
                "uname":this.uname,
                "cardPassword":this.firstPassword,
                "usex":this.sex,
                "age":this.age,
                "uhome":address,
                "utelephone":this.telephone
            });
            if(!uidflag){
                this.$message.error("身份证要求18位");
                return false;
            }
            if(!firstPassword){
                this.$message.error("密码必须为数字且为六位");
                return false;
            }
            if(!telephone){
                this.$message.error("电话号码必须为11位");
                return false;
            }
            if("0"===$('#county option:selected').val()){
                this.$message.error("请勾选地址到县级");
                return false;
            }
            if(""===this.birthday||null===this.birthday){
                this.$message.error("请正确勾选日期");
                return false;
            }
            //当所有条件都满足的时候就开户
            if(uidflag&&firstPassword&&telephone&&"0"!=$('#county option:selected').val()&&""!=this.birthday&&null!=this.birthday){
                this.$axios
                .post('/bk-user/firstOpenAccount',
                        data,
                        {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
                )
                .then(result => {
                    if(result.data.code===200){
                        alert("当前账户创建成功,账户卡号为："+result.data.data[0].cardId);    
                        // 刷新当前页面
                        this.reload();
                    }else{
                        alert(result.data.message);
                    }
                })
                .catch(failResponse => {
                    
                })
            }
        },
        nofirstOpenAccount: function (){//非第一次开户
            var Uidregix=/^[\d]{18}$/;//身份证
            var password=/^[\d]{6}$/;//第二次开户的密码
            var uid1flag=this.uid1.match(Uidregix);
            var existAccountflag=this.existAccount.match(Uidregix);
            var nofirstPassword=this.nofirstPassword.match(password);
            var data = Qs.stringify({
                "uid":this.uid1,
                "uname":this.uname1,
                "cardPassword":this.nofirstPassword,
                "cardId":this.existAccount
            });
            if(!uid1flag){
                 this.$message.error("身份证要求18位");
                 return false;
            }
            if(!existAccountflag){
                this.$message.error("卡号输入格式错误");
                 return false;
            }
            if(!nofirstPassword){
                this.$message.error("密码必须为数字且为六位");
                 return false;
            }
            if(uid1flag&&nofirstPassword&&existAccountflag){
                this.$axios
                .post('/bk-user/nofirstOpenAccount',
                        data,
                        {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
                )
                .then(result => {
                    if(result.data.code===200){
                        alert("当前账户创建成功,账户卡号为："+result.data.data[0].cardId);
                        // 刷新当前页面
                        this.reload();
                    }else if(result.data.code===400){
                        alert(result.data.message);
                        this.isAccountexist=true;
                    }
                })
                .catch(failResponse => {
                    
                })
            }   
        }
    }
}
</script>

<style>
    .radio1{
        width: 22px;
        display: inline-block;
        height: 22px;
        top: 6px;
        position: relative;
    }
    .radio2{/*性别radio*/
        position: relative;
        top: 2px;
        left: 10px;
    }
    .activePannel{
        background: #f5f5f5;
    }
    .noactivePannel{
        background: #ffffff;
    }
    .sex{/*性别*/
        margin-top: 6px;
        margin-left: 35px;
    }
    .select1{/*省市联动*/
        padding-left: 0px;
    }
    .selectAddress{
        width: 110px !important;
        margin-left: 2px !important;
        margin-top: 3px;
    }
    /*支付密码框*/
    ul,li{
        list-style: none;
    }
    .password-div input,.password-div1 input{
        width: 1px;
        height: 1px;
        opacity: 0;
        border: 0;
    }
    .password-lable{
        height: 30px;
        clear: both;
    }
    .password-lable li{
        float: left;
        width: 33px;
        height: 38px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #dedede;
        margin-left: -1px;
        font-size: 33px;
    }
    /*支付密码框*/
    .nofirstimg{
        width: 106%;
        height: 202px;
        margin-bottom: 10px;
        margin-left: -14px;
        margin-top: -9px;
    }
    /*是否显示身份证计数*/
    .isDisabledClass{
        display:inline-block !important;
        position: relative;
        top: 8px;
        color: rgb(204, 204, 204);
        font-size: 10px;
    }
    .noDisabledClass{
        display:none !important;
        position: relative;
        top: 8px;
        font-size: 10px;
    }
    .isAccountexistClass{
        display: none !important;
        position: relative;
        top: 6px;
        color: rgb(204, 204, 204);
        font-size: 10px;
    }
    .noAccountexistClass{
        position: relative;
        top: 6px;
        color: rgb(204, 204, 204);
        font-size: 10px;
    }
</style>

